<template>
  <div>
    <el-dialog
      title="分配权限点(1.页面访问 2.页面下功能)"
      :visible="showDialog"
      width="50%"
      @close="close"
    >
      <!-- <span>权限点列表树</span> -->
      <!-- 渲染权限点树形列表 -->
      <!-- prop 用来自定义显示 默认是label -->

      <!-- 基本展示三个基础属性配置： -->
      <!-- 1. show-checkbox 显示选择框 -->
      <!-- 2. default-expand-all 默认展开 -->
      <!-- 3. check-strictly  设置true，可以**关闭父子关联** -->
      <!-- 4. node-key="id" // 选中时绑定的数据字段(唯一) 必传属性 -->
      <el-tree
        ref="treePoints"
        :data="pointList"
        :props="{ label: 'name' }"
        show-checkbox
        default-expand-all
        check-strictly
        node-key="id"
      ></el-tree>

      <span slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="assignPoints">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 导入获取权限点列表数据的API
import { getPermissionList } from '@/api/permisson'
// 获取角色选择已有的权限点API
import { getRoleDetail, assignPerm } from '@/api/setting'
// 导入转换成树形结构的公共方法
import { formatTreeData } from '@/utils/index'
export default {
  props: {
    // 控制弹出层显示隐藏
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      // 权限点列表
      pointList: [],
      // 当前选中角色的id
      roleId: ''
    }
  },
  created () {
    this.getPermissions()
  },
  methods: {
    // 给角色分配权限点
    async assignPoints () {
      /**
       * 1. 准备{id:角色id, permIds:[] 所有选中的节点的id组成的数组} 参数
       * 2. 调用接口分配权限
       * 3. 提示并关闭弹层(不需要刷新列表)
       * getCheckedKeys 获取的是选中节点的id的数组 | getCheckedNodes 获取选中节点的对象
       */
      // 所有选中节点的id数组传参使用短路运算，防止获取到的结果为null
      await assignPerm({ id: this.roleId, permIds: this.$refs.treePoints.getCheckedKeys() || [] })
      this.$message.success('分配成功！')
      this.close()
    },
    // 获取选中角色的权限点数据进行回填
    // id 父组件传递过来的点击的角色id
    async getRoleSeledPoints (id) {
      this.roleId = id
      const res = await getRoleDetail(id)
      console.log('选中角色权限点数据', res)
      this.rolePointsId = res.permIds
      // 注意: el-tree没有提供 v-model 绑定复选框，需要命令式调用组件来操作复选框的选中状态！！
      this.$refs.treePoints.setCheckedKeys(res.permIds)
    },
    // 获取所有权限点数据
    async getPermissions () {
      const res = await getPermissionList()
      console.log('权限点列表数据', res)
      this.pointList = formatTreeData(res)
    },
    // 关闭弹层
    close () {
      // 清空上次选中的权限 => 避免上次回填信息显示闪屏
      this.$refs.treePoints.setCheckedKeys([])
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
